<template>
    <div>
        <div class="container">
            <h1>浏览记录</h1>
            <div class="action-buttons">
                <button @click="clearHistory">清空浏览记录</button>
            </div>
        </div>

        <div class="container">
            <ul class="history-list">
                <li v-for="(item, index) in browseHistory" :key="index" class="history-item">
                    <div class="item-content">
                        <ArticleCard :article="item" @click="handleCardClick(item)" class="clickable-card">
                        </ArticleCard>
                        <button @click="deleteHistoryItem(index)">删除</button>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import require from '../require';
import { onMounted } from 'vue';
import { UserStore } from '../store/user';
import { useRouter } from 'vue-router';
// 引入 ArticleCard 组件
import ArticleCard from '../components/ArticleCard.vue';

const router = useRouter();
const browseHistory = ref([]);

// 页面加载完成后获取数据
onMounted(async () => {
    browseHistory.value = await queryBrowseHistory();
});

const queryBrowseHistory = async () => {
    const res = await require.get('user/queryBrowseRecord');
    const alist = [];
    for (let i = 0; i < res.articleAmount; i++) {
        const e = res.articleList[i];
        alist.push({
            articleId: e.articleId,
            title: e.title,
            author: e.author.nickName,
            updateTime: e.updateTime,
            likedAmounts: e.likedAmounts,
            collectedAmounts: e.collectedAmounts,
            commentedAmounts: e.commentedAmounts,
            currentUserCollect: e.currentUserCollect,
            currentUserLike: e.currentUserLike,
            creatorName: e.author.nickName,
            creatorId: e.author.userId,
        });
    }
    return alist;
};

// 清空浏览记录
const clearHistory = async () => {
    await require.post('user/clearBrowseRecord', {
        1:1
    });
    browseHistory.value = [];
};

// 删除单条浏览记录
const deleteHistoryItem = async (index) => {
    const articleId = browseHistory.value[index].articleId;
    await require.post('user/deleteBrowseRecord', { articleId:articleId });
    browseHistory.value.splice(index, 1);
};

// 处理行点击事件
const handleCardClick = (article) => {
    // 生成包含 query 参数的路由对象
    const r = router.resolve({
        name: 'HisArticle', // 文章详情页路由名
        query: {
            articleId: article.articleId, // 文章 ID
        }
    });
    // 在新标签页打开路由链接
    window.open(r.href, '_blank');
};
</script>

<style scoped>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
}

.container {
    display: flex;
    flex-direction: column;
    /* 将主轴方向改为垂直 */
    justify-content: center;
    /* 默认主轴开始对齐 */
    align-items: center;
    /* 默认交叉轴开始对齐 */
    padding: 20px;
}

.action-buttons {
    margin-top: 10px;
}

.history-list {
    list-style-type: none;
    padding: 0;
    width: 100%;
}

.history-item {
    margin-bottom: 10px;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 4px;
}

.item-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.clickable-card {
    cursor: pointer;
}

.clickable-card:hover {
    background-color: #f0f0f0;
    /* 鼠标悬停时的背景颜色，可根据需求调整 */
}
</style>
